<template>
  <div id="list">
    <van-row v-for="user in users" :key="user.id">
      <van-col span="6">
        <van-image width="120" height="90" :src="uploads + user.icon" />
      </van-col>
      <van-col span="12">
        <p>{{ user.name }}</p>
        <p class="info">{{ user.id }}-{{ user.age }}-{{ user.type }}</p>
        <button>查看详情</button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  props: ["users"],
};
</script>

<style lang="scss" scoped>
#list {
  p {
    margin: 10px 0;
  }
  >>> .van-row {
    padding: 0 15px;
    margin-bottom: 50px;
    border-bottom: 1px solid lightgray;
  }
  .info {
    color: darkgray;
  }
  button {
    color: white;
    border: none;
    border-radius: 8%;
    background-color: darkorange;
  }
  >>> .van-image {
    padding: 5px;
  }
}
</style>